<template>
	<view class="home-wrapper">
		<!-- 搜索栏 -->
		<searchLink></searchLink>
		<!-- 轮播图 autoplay-->
		<swiper class="banner-swiper" circular indicator-dots indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in swiperdata" :key="index">
				<view class="swiper-item">
					<image :src="item.image_src" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 快捷导航栏 -->
		<view class="nav">
			<view class="nav-item" v-for="(item, index) in catitems" :key="index" >
				<image class="nav-icon" :src="item.image_src" mode=""></image>
				<!-- <text class="nav-text">分类</text> -->
			</view>
		</view>
		<!-- 楼层 时尚女装 -->
		<view class="floor" v-for="(item, index) in floordata" :key="index">
			<view class="floor-head">
				<image :src="item.floor_title.image_src" mode=""></image>
			</view>
			<view class="floor-content" >
				<view class="item-l">
					<image :src="item.product_list[0].image_src" mode=""></image>
				</view>
				<view class="right">
					<view class="item-r" v-for="(subItem, subIndex) in item.product_list.slice(1)" :key="subIndex">
						<image v-if="subItem" :src="subItem.image_src" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchLink from '../search/search.vue'
	import request from '@/utils/request.js'
	export default {
		components: {
			searchLink
		},
		data() {
			return {
				title: 'Hello',
				// banner 图
				swiperdata: [
					"/static/images/titleImage.png",
					"/static/images/titleImage.png",
					"/static/images/titleImage.png",
					"/static/images/titleImage.png"
				],
				// 快捷导航图标
				catitems: [
					'/static/tabs/icon_category@3x.png',
					'/static/tabs/icon_category@3x.png',
					'/static/tabs/icon_category@3x.png',
					'/static/tabs/icon_category@3x.png'
				],
				// 时尚女装数据
				floordata: []
			}
		},
		onLoad() {
			this.getSwiperdata()
			this.getCatitems()
			this.getFloordata()
		},
		methods: {
			// 获取 轮播图数据
			async getSwiperdata() {
				const resSwiper = await this.$request({
					url: '/api/public/v1/home/swiperdata'
				})
				// console.log(res)
				this.swiperdata = resSwiper
			},
			// 获取 导航栏数据
			async getCatitems() {
				const res = await this.$request({
					url: '/api/public/v1/home/catitems'
				})
				// console.log(res)
				this.catitems = res
			},
			// 获取 楼层区域数据
			async getFloordata() {
				const res = await this.$request({
					url: '/api/public/v1/home/floordata'
				})
				// console.log(res)
				this.floordata = res
			}
		}
	}
</script>

<style>
/* banner 区域 */
.banner-swiper {
	height: 340rpx;
}
.swiper-item {
	height: 340rpx;
}
.banner-swiper image {
	width: 100%;
	height: 100%;
}

/* 快捷导航 */
.nav {
	height: 194rpx;
	display: flex;
	justify-content: space-around;
}
.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.nav-item .nav-icon {
	width: 128rpx;
	height: 140rpx;
}
/* 楼层区 时尚女装 */
/* 时尚女装 头部 */
.floor .floor-head {
	height: 88rpx;	
	background-color: #f4f4f4;
	padding-top: 12rpx;
}
.floor .floor-head image {
	height: 100%;
  width: 100%;
}
/* 时尚女装 主体内容 */
.floor-content {
	padding: 20rpx 17rpx;
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
}
.floor-content .item {
	display: flex;
}
.floor-content .right {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
}
.floor-content .item-r {
	margin-left: 10rpx;
	height: 188rpx;
	margin-bottom: 10rpx;
	width: 232rpx;
	background-color: pink;
	// 解决图片默认缝隙
	display: flex;
	flex-wrap: wrap;
}
.floor-content .item-l {
	height: 386rpx;
	width: 232rpx;
}
.floor-content .item-l image,
.floor-content .item-r image {
	width: 100%;
	height: 100%;
}
</style>
